<template>
  <div class="chinaMap"  :style="{ height: height }" ref="echarts"></div>
</template>
<script>
import fengyiMapData from '@/lib/fyx.json';
import * as echarts from 'echarts';
export default {
  name: 'FengyiMap',
  props: {
    // 父组件传递的数据
    data: {
      type: Array,
      default: () => [],
    },
    height:{
      type: String,
      default:'3.6979rem' ,
    }
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    setMap() {
      echarts.registerMap('fengyi', fengyiMapData);
      var mapName = 'fengyi';
      var data = [
        { name: '分宜县', value: 4075 },
        { name: '钤山镇', value: 800 },
        { name: '湖泽镇', value: 600 },
        { name: '操场乡', value: 500 },
        { name: '双林镇', value: 700 },
      ];
      // 添加固定坐标点
      const geoCoordMap = {
        分宜县: [114.692345, 27.814726],
        钤山镇: [114.778543, 27.742132],
        湖泽镇: [114.569238, 27.869927],
        操场乡: [114.639423, 27.943701],
        双林镇: [114.812531, 27.857319],
      };

      function convertData(data) {
        const res = [];
        for (let i = 0; i < data.length; i++) {
          const coord = geoCoordMap[data[i].name];
          if (coord) {
            res.push({
              name: data[i].name,
              value: coord.concat(data[i].value),
            });
          }
        }
        return res;
      }

      const pointData = convertData(data);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        geo: [
          {
            map: mapName,
            zlevel: -1,
            zoom: 0.9,
            silent: true,
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            roam: false,
            itemStyle: {
              normal: {
                borderColor: 'rgba(192,245,249,.8)',
                borderWidth: 3,
                shadowColor: '#6FFDFF',
                shadowOffsetY: 0,
                shadowBlur: 10,
              },
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                  fontFamily: 'Arial',
                },
              },
              emphasis: {
                show: false,
                color: '#fff',
              },
            },
          },
          {
            show: true,
            map: mapName,
            zoom: 0.9,
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                  fontFamily: 'Arial',
                },
              },
              emphasis: {
                color: '#fff',
              },
            },

            blur: {
              label: { show: true, color: '#000' },
            },
            roam: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: '#fff',
                },
                color: '#fff',
                borderColor: '#32CBE0',
                borderWidth: 1.5,
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 1000,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0.5,
                      color: '#0D59C1',
                    },
                    {
                      offset: 1,
                      color: '#53C9C7',
                    },
                  ],
                  global: true,
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                },
                borderWidth: 3,
                borderColor: 'rgba(255, 230, 175,0.8)',
                shadowColor: 'rgba(255, 230, 175,0.5)',
                shadowBlur: 30,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                  backgroundColor: 'transparent',
                },
                areaColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1cfbfe',
                    },
                    {
                      offset: 1,
                      color: '#3348e7',
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            type: 'map',
            map: mapName,
            zlevel: -2,
            zoom: 0.9,
            layoutCenter: ['50%', '51.4%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderColor: 'rgba(35, 161, 184,0.5)',
                shadowColor: 'rgba(35, 161, 184,0.8)',
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: '#257AB2',
              },
            },
          },
          {
            type: 'map',
            map: mapName,
            zlevel: -3,
            zoom: 0.9,
            layoutCenter: ['50%', '52.4%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderColor: 'rgba(7, 65, 117,0.5)',
                shadowColor: 'rgba(7, 65, 117,0.8)',
                shadowOffsetY: 15,
                shadowBlur: 8,
                areaColor: '#0A2763',
              },
            },
          },
        ],
        series: [
          {
            type: 'map',
            layoutCenter: ['50%', '50%'],
            layoutSize: '90%',
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
              },
              emphasis: {
                color: '#fff',
              },
            },
            // geoIndex: 0,
            map: mapName,
            tooltip: {},
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: '#fff',
                },
                color: '#fff',
                borderColor: '#32CBE0',
                borderWidth: 1.5,
                areaColor: '#083678',
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                },
                borderWidth: 3,
                borderColor: 'rgba(255, 230, 175,0.8)',
                shadowColor: 'rgba(255, 230, 175,0.5)',
                shadowBlur: 30,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                  backgroundColor: 'transparent',
                },
                areaColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1cfbfe',
                    },
                    {
                      offset: 1,
                      color: '#3348e7',
                    },
                  ],
                  false
                ),
              },
            },
            data: data,
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'fill',
            },
            label: {
              show: true,
              color: '#fff',
              formatter: function (obj) {
                return obj.name;
              },
              position: 'right',
              offset: [5, 0],
              fontSize: 12,
              fontWeight: 'bold',
            },
            symbolOffset: [-25, 10],
            symbolSize: 10,
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: '#fff',
                shadowBlur: 10,
                shadowColor: '#fff',
              },
            },
            zlevel: 6,
            data: pointData,
          },
        ],
      };
      if (!this.myChart) this.myChart = this.$echarts(this.$el);

      this.myChart.clear();
      this.myChart.resize();
      this.myChart.setOption(option);
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
  },
  mounted() {
    this.setMap();
    // 添加窗口resize事件监听
    this.resizeHandler = () => {
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }
      this.resizeTimer = setTimeout(() => {
        this.handleResize();
      }, 200);
    };
    window.addEventListener('resize', this.resizeHandler);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听，防止内存泄漏
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler);
      this.resizeHandler = null;
    }

    // 释放图表实例
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  },
};
</script>
